<template>
  <div class="home">
    <div class="content">
      <!-- 表单区域 -->
      <el-form :model="registerForm" :rules="rules" ref="registerForm">
        <img src="@/assets/images/Login/logo1.jpg" />
        <div class="content_title">注册小米账号</div>
        <div class="content_select">
          <div class="acc">
            <el-form-item prop="username">
              <el-input v-model="registerForm.username" placeholder="请输入账号" @blur="checkUser"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="registerForm.password" placeholder="请输入密码" type="password"></el-input>
            </el-form-item>
          </div>
          <div class="select">
            <el-form-item prop="region">
              <el-select v-model="registerForm.region" placeholder="国家/地区">
                <el-option label="中国" value="shanghai"></el-option>
                <el-option label="美国" value="beijing"></el-option>
                <el-option label="日本" value="beijing"></el-option>
                <el-option label="英国" value="beijing"></el-option>
                <el-option label="韩国" value="beijing"></el-option>
                <el-option label="法国" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="content_input">
          <div class="input">
            <el-form-item prop="phone">
              <el-input placeholder="请输入手机号" v-model="registerForm.phone" type="number">
                <el-select v-model="registerForm.select" slot="prepend" placeholder>
                  <el-option label="+86" value="1"></el-option>
                  <el-option label="+84" value="2"></el-option>
                  <el-option label="+85" value="3"></el-option>
                </el-select>
              </el-input>
            </el-form-item>
          </div>
          <div class="code">
            <el-form-item prop="code">
              <el-input placeholder="请输入验证码" v-model="registerForm.code" type="number"></el-input>
              <el-button type="success" @click="getCode" :loading="isCode" v-if="!exitCode">发送验证码</el-button>
              <el-button type="success" @click="getCode" :loading="isCode" v-else>重新发送</el-button>
            </el-form-item>
          </div>
        </div>
        <el-form-item class="btn">
          <el-button @click="register" :loading="isActive">立即注册</el-button>
        </el-form-item>
        <div class="footer">
          <a href class="footer_awu">
            已阅读并同意：小米
            <a
              target="blank"
              href="https://static.account.xiaomi.com/html/agreement/user/zh_CN.html"
              class="footer_ayou"
            >用户协议</a>
            和
            <a
              target="blank"
              href="https://privacy.mi.com/miaccount/zh_CN/"
              class="footer_ayou"
            >隐私政策</a>
          </a>
        </div>
      </el-form>
      <!-- 底部区域 -->
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import Footer from '@/components/content/LoginFooter/LoginFooter'

import { getUserInfo } from '@/components/network/Login/login.js'
import { updateUserInfo } from '@/components/network/Register/register.js'
export default {
  components: {
    Footer
  },
  data() {
    const phoneRule = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'))
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
        if (reg.test(value)) {
          callback()
        } else {
          return callback(new Error('请输入正确的手机号'))
        }
      }
    }
    return {
      registerForm: {
        region: '中国',
        phone: '',
        select: '+86',
        code: '',
        username: '',
        password: ''
      },
      rules: {
        // username: [
        //   { required: true, message: '请输入账号', trigger: 'blur' },
        //   { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
        // ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择国家/地区', trigger: 'change' }
        ],
        phone: [{ validator: phoneRule, trigger: 'blur' }]
      },
      isCode: false,
      exitCode: false,
      isActive: false,
      userlist: []
    }
  },
  created() {
    this.keyupSubmit()
    this.getUserInfos()
  },
  methods: {
    // 点击回车触发按钮
    keyupSubmit() {
      document.onkeydown = e => {
        const _key = window.event.keyCode
        if (_key === 13) {
          this.register()
        }
      }
    },
    // 获取验证码
    getCode() {
      const codeNum = parseInt((Math.random() * 9 + 1) * 100000)
      this.isCode = true
      setTimeout(() => {
        this.isCode = false
        this.registerForm.code = codeNum
        this.exitCode = true
      }, 1000)
    },
    // 获取用户信息
    async getUserInfos() {
      const res = await getUserInfo()
      this.userlist = res
    },
    // 检查用户是否存在
    checkUser() {
      let isExit = false
      if (this.registerForm.username !== '') {
        for (let i = 0; i < this.userlist.length; i++) {
          if (this.userlist[i].username === this.registerForm.username) {
            isExit = true
          }
        }
        if (isExit) {
          this.$message.warning('亲，这个用户已存在哦~')
          this.registerForm.username = ''
        }
      }
    },
    async register() {
      const phone = this.registerForm.phone
      const username = this.registerForm.username
      const password = this.registerForm.password
      const code = this.registerForm.code
      if (!(phone && username && password && code)) {
        this.$message.warning('请填写相应内容！')
      } else if (
        !(
          phone.length === 11 &&
          username.length >= 5 &&
          username.length <= 10 &&
          password.length >= 6 &&
          password.length <= 12 &&
          code
        )
      ) {
        return this.$message.warning('信息格式错误！')
      } else {
        updateUserInfo(this.registerForm)
        this.isActive = true
        setTimeout(() => {
          this.$message.success('注册成功！')
          this.isActive = false
          this.$router.push('/login')
        }, 1000)
      }
    }
  }
}
</script>
<style scoped>
.home {
  height: 782px;
  background-color: #f7f7f7;
  padding-top: 155px;
}
.acc .el-input {
  width: 340px;
}
.select .el-select {
  width: 340px;
}
.select .el-form-item {
  margin: 0;
}
.input .el-select {
  background-color: #fff;
  width: 70px;
}
.input .el-input {
  width: 340px;
}
.code .el-input {
  width: 200px;
}
.code .el-button {
  height: 50px;
  margin-left: 10px;
}
.content {
  background-color: #fff;
  text-align: center;
  margin: 0 auto;
  height: 83%;
  width: 45%;
}
.content .el-form {
  width: 345px;
  margin: 0 auto;
}
.content .content_title {
  margin: 30px 0;
  font-size: 30px;
}
.content .content_input {
  margin-top: 20px;
}
.btn .el-button {
  background: #ff6700;
  color: #fff;
  width: 340px;
}
.content .footer {
  margin-top: 30px;
}
.content .footer .footer_awu {
  font-size: 14px;
  color: #999;
}
.content .footer .footer_ayou {
  font-size: 14px;
  color: black;
  font-weight: 600;
}
</style>
